<template>
    <div class="card px-3">

        <form @submit.prevent='onSubmit'>
            <div class="formgroup-inline align-items-center grid grid-cols-4 gap-5">
                <div v-for="item in scriptDetail.args" class="mt-3">
                    <label :for="item.id" class="text-sm font-semibold leading-6 text-gray-900">{{ item.name }}</label>
                    <div class="flex flex-column mt-2">
                        <InputText v-if="item.type === 'one_str'" :id="item.id" v-model="item.value" class="w-full"
                                   autocomplete="off"/>

                        <Textarea v-else-if="item.type === 'multi_str'" :id="item.id" v-model="item.value" rows="5"
                                  cols="50" class="w-full"
                                  autocomplete="off"/>

                        <div v-else-if="item.type === 'bool'" class="flex flex-wrap gap-3">
                            <div class="flex align-items-center">
                                <RadioButton v-model="item.value" inputId="ingredient1" name="pizza"
                                             :value="true" :id="item.id"/>
                                <label for="ingredient1" class="ml-2">是</label>
                            </div>
                            <div class="flex align-items-center">
                                <RadioButton v-model="item.value" inputId="ingredient2" name="pizza" :value="false"
                                             :id="item.id"/>
                                <label for="ingredient1" class="ml-2">否</label>
                            </div>
                        </div>

                        <div v-else-if="item.type === 'enums'" class="flex flex-wrap gap-3 w-full">
                            <Select class="w-full" filter v-model="item.value" :options="item.enums"
                                    aria-labelledby="basic"/>
                        </div>
                        <div v-else-if="item.type === 'password'" class="flex flex-wrap gap-3">
                            <Password v-model="item.value" :feedback="false" class="w-full"/>
                        </div>
                        <div v-else-if="item.type === 'number'" class="flex flex-wrap gap-3">
                            <InputNumber v-model="item.value" class="w-full"/>
                        </div>
                        <small class="p-error">
                            {{ errors[item.id] }}
                        </small>
                    </div>
                </div>
            </div>

            <div style="width:100%;display: flex; justify-content: end;" class='mb-3'>
                <div>
                    <Button type="submit" label="执行" :loading="debugLoading"/>
                    <!--<Button key="back" danger @click="() => discontinue()" severity="secondary" class='ml-2'>终止-->
                    <!--</Button>-->
                </div>
            </div>
        </form>
        <textarea rows="50" id="runLog" v-model='logContent'/>
    </div>

</template>
<script setup>
import {ref, reactive, onMounted} from "vue";

import Select from 'primevue/select';

const logContent = ref('')
const scriptDetail = ref({})
const debugLoading = ref(false)


onMounted(() => {
    window.addEventListener('pywebviewready', async function () {
        try {

            scriptDetail.value = await pywebview.api.get_script_detail();
            console.log(scriptDetail.value)
        } catch (error) {
            console.error('Failed to fetch script meta:', error);
        }
    });
});


const errors = ref({});


const onSubmit = async () => {
    const values = {}
    let is_exit = false
    scriptDetail.value.args.forEach(item => {
        console.log(item.value)
        if (item.require && (item.value === '' || item.value === undefined || item.value === null)) {
            errors.value[item.id] = '该参数必填'
            is_exit = true
        } else {
            errors.value[item.id] = ''
            values[item.id] = item.value
        }
    })
    if (is_exit) {
        return

    }
    debugLoading.value = true
    await pywebview.api.run_script(scriptDetail.value)
    debugLoading.value = false
}

window.updateLogContent = function (data, clear) {
    if (clear) {
        logContent.value = ''
    }
    logContent.value += data.content

    console.log(logContent.value)
}

</script>

<style>
#runLog {
    height: 60vh;
    width: 100%;
    background-color: #1e1e1e; /* 深色背景，避免纯黑 */
    color: #d1d5db; /* 使用浅灰色字体，便于对比 */
    font-family: Consolas, monospace; /* 等宽字体，适合日志 */
    font-size: 14px;
    line-height: 1.5;
    padding: 12px;
    border-radius: 6px;
    border: none;
    outline: none;
    resize: none; /* 禁止手动调整大小 */
    overflow-y: auto; /* 允许垂直滚动 */
    white-space: pre-wrap; /* 保持换行 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 添加阴影 */
}

#runLog::placeholder {
    color: #6b7280; /* 占位符颜色 */
}
</style>